<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单管理-右边的数据列表</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="/resources/favicon.ico">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/resources/css/public.css" media="all" />
	<link rel="stylesheet" href="/resources/layui_ext/dtree/dtree.css">
    <link rel="stylesheet" href="/resources/layui_ext/dtree/font/dtreefont.css">
</head>
<body class="childrenBody">
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form" method="post" id="searchForm">
			<div class="layui-form-item" style="text-align: center;">
			    <div class="layui-inline">
			      <label class="layui-form-label">菜单名称:</label>
			      <div class="layui-input-inline">
			        <input type="text" name="title"  placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <button type="button" class="layui-btn" id="doSearch"><span class='layui-icon'>&#xe615;</span>搜索</button>
		          <button type="reset" class="layui-btn layui-btn-danger"><span class='layui-icon'>&#xe669;</span>重置</button>
			    </div>
		   </div>
		</form>
	</blockquote>
	
	<table id="menuTable" class="layui-table" lay-filter="menuTable"></table>
	
	<!--表头-->
	<div id="menuTableToolBar" style="display: none;">
		<a class="layui-btn layui-btn-sm" lay-event="add"><span class="layui-icon">&#xe61f;</span>添加</a>
	</div>
	<!--操作-->
	<div type="text/html" id="menuTableRowBar"  style="display: none;">
		<a class="layui-btn layui-btn-xs" lay-event="update"><span class="layui-icon">&#xe642;</span>编辑</a>
		<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><span class="layui-icon">&#xe640;</span>删除</a>
	</div>
	
	<!-- 修改和添加弹出层开始 -->
	<div style="display: none;padding: 3px" id="saveOrUpdateDiv">
		<form id="dataForm" lay-filter="dataForm" class="layui-form layui-form-pane">
			<div class="layui-form-item">
				<label class="layui-form-label">父级菜单:</label>
				<div class="layui-input-block">
					<input type="hidden" name="id">
					<ul id="menuTree" class="dtree" data-id="0"></ul>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">菜单名称:</label>
				<div class="layui-input-block">
					<input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入菜单名称" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">菜单地址:</label>
				<div class="layui-input-block">
					<input type="text" name="href" placeholder="请输入菜单地址"  autocomplete="off"  class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
				    <label class="layui-form-label">菜单图标:</label>
				    <div class="layui-input-inline">
				    	 <input type="text" name="icon"  autocomplete="off" placeholder="请输入菜单图标" class="layui-input">
				    </div>
				 </div>
				 <div class="layui-inline">
				    <label class="layui-form-label">TARGET:</label>
				    <div class="layui-input-inline">
				      <input type="text" name="target"  autocomplete="off" placeholder="请输入TRAGET" class="layui-input">
				    </div>
			    </div>
				 
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">是否展开:</label>
					<div class="layui-input-inline">
						<input type="radio" name="open" value="1" title="展开">
						<input type="radio" name="open" value="0" title="不展开" checked="">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">是否可用:</label>
					<div class="layui-input-inline">
						<input type="radio" name="available" value="1" title="可用" checked="">
						<input type="radio" name="available" value="0" title="不可用" >
					</div>
				</div>
			</div>	
			<div class="layui-form-item">
				<label class="layui-form-label">排序码:</label>
				<div class="layui-input-block">
					<input type="text" name="ordernum" id="ordernum"  lay-verify="required|number" autocomplete="off" placeholder="请输入排序码" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" style="text-align: center;">
				<button type="button" class="layui-btn" lay-filter="doSubmit" lay-submit=""><span class='layui-icon'>&#xe609;</span>提交</button>
				<button type="reset" class="layui-btn layui-btn-danger" ><span class='layui-icon'>&#xe669;</span>重置</button>
			</div>
		</form>
	</div>
	<!-- 修改和添加弹出层结束 -->
	
	
	<script type="text/javascript" src="/resources/layui/layui.js"></script>
	<script type="text/javascript">
	var tableIns;
	var $;
	layui.extend({
	    dtree: '/resources/layui_ext/dtree/dtree' 
	  }).use(['dtree','layer','jquery','table','form'],function(){
		  var dtree = layui.dtree;
		  var layer = layui.layer;
		  $ = layui.jquery;
		  var table = layui.table;
		  var form = layui.form;
		
		  //数据加载
		  //渲染数据表格

		//渲染数据表格
			tableIns = table.render({
				elem:'#menuTable',
				url:'/menu/loadAllMenu',
				toolbar:'#menuTableToolBar',//开启同工具栏
				defaultToolbar:['filter','print'],
				title: '菜单数据表',
				height:'full-150',//固定高度
				cols:[ [
					{field:'id',title:'ID',align:'center',fixed: 'left', width:'80'},
					{field:'pid',title:'父部门ID',align:'center',width:'80'},
					{field:'title',title:'菜单名称',align:'center',width:'120'},
					{field:'href',title:'菜单地址',align:'center',width:'180'},
					{field:'icon', title:'菜单图标',align:'center',width:'150',templet: function(d){
				    	  return '<span class=layui-icon>'+d.icon+'</span>';
				     }},
					{field:'open',title:'是否展开',align:'center',width:'80',templet: function(d){
						return d.open==1?'<font color=blue>展开</font>':'<font color=red>不展开</font>';
					}},
					{field:'available',title:'是否可用',align:'center',width:'80',templet: function(d){
						 return d.available==1?'<font color=blue>可用</font>':'<font color=red>不可用</font>';
					}},
					{field:'target',title:'TARGET',align:'center',width:'180'},
					{field:'ordernum',title:'排序码',align:'center',width:'80'},
					{field:'right',title:'操作',toolbar:'#menuTableRowBar',align:'center',width:'150'}
				] ],
				page:true,
				//这一页的数据被删除完了 返回前一页
				done:function(res,curr,count){//res代表后台返回的数据，curr当前页，count 数据总条数
					if(res.data.length==0&&curr!=1){
						tableIns.reload({page:{curr:curr-1}});
					}
				}
			});
		    //模糊查询
		    $("#doSearch").click(function(){
		    	var params = $("#searchForm").serialize();
		    	tableIns.reload({
		    		url:'/menu/loadAllMenu?'+params,
		    		page:{//当前页
		    			curr:1
		    		}
		    	})
		    });
		    
		    //监听表头点击事件
		    table.on('toolbar(menuTable)',function(obj){
		    	switch(obj.event){
		    		case 'add':
		    			 openAddLayer();
		    		break;
		    	}
		    });
		    
		    var mainIndex;
		    var url;
		    //打开添加的弹出层
		    function openAddLayer(){
		    	mainIndex=layer.open({
		    		type:1,
		    		title:'添加部门',
		    		skin: 'layui-layer-molv', //加上边框
					area: ['800px', '600px'], //宽高
					content:$("#saveOrUpdateDiv"),
					success:function(index){
						url="/menu/addMenu";
						$("#dataForm")[0].reset();
						//重新加载树
						addOrUpdateDeptTree.refreshTree();
					
						//加载最大的排序码
						$.post("/menu/loadPermissionMaxOrderNum",function(obj){
							$("#ordernum").val(obj.data);
						})
						
						 $(".dtree-select").removeClass("dtree-select-show");//解决弹出层里面的下列树展开的问题
					}

		    	});
		    }
		    
		    //监听行点击事件
		    table.on('tool(menuTable)',function(obj){
		    	var data = obj.data;//获取当前行数据
		    	var layEvent = obj.event;//获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		    	if(layEvent === 'update'){//修改
		    		openUpdateLayer(data);
		    	}else if(layEvent === 'del'){//删除
		    		deleteDept(data);
		    	}
		    	
		    })
		    //删除
		    function deleteDept(data){
		    	//判断当前部门有没有子节点
		    	$.post("/menu/checkCurrentMenuHasChild",{id:data.id},function(res){
		    		if(res.data>0){//说明有子节点
		    			layer.msg("当前【"+data.title+"】部门有子节点，请先删除子节点");
		    		}else{
		    			layer.confirm('真的删除【'+data.title+'】部门么',function(index){
			    			layer.close(index);
			    			//向服务器发送删除指令
			    			$.post("/menu/deleteMenu",{id:data.id},function(obj){
			    				if(obj.code == 200){
			    					tableIns.reload();//重新加载表单
			    					//刷新左边的树
			    					window.parent.left.leftDeptTree.reload();
			    				}
			    				layer.msg(obj.msg);
			    			});
			    		});
		    		}
		    	})
		    }
		    
		    //打开修改的弹出层
		    function openUpdateLayer(data){
		    	mainIndex=layer.open({
		    		type:1,
		    		title:'修改部门',
		    		skin: 'layui-layer-molv', //加上边框
					area: ['800px', '600px'], //宽高
					content:$("#saveOrUpdateDiv"),
					success:function(index){
						url="/menu/updateMenu";
						$("#dataForm")[0].reset();
						form.val("dataForm",data);
						//初始化下拉列表的值
						dtree.dataInit("menuTree",data.pid+"");
						var selectParam = dtree.selectVal("menuTree"); //设置选中的值
						 $(".dtree-select").removeClass("dtree-select-show");//解决弹出层里面的下列树展开的问题
					}
		    	});
		    }
		    
		    //监听提交按钮的事件  添加和修改完成后刷新左边的树
		    form.on("submit(doSubmit)",function(data){
		    	var params = $("#dataForm").serialize();
		    	//提交 数据
		    	$.post(url,params,function(obj){
		    		if(obj.code==200){
		    			tableIns.reload();//重新加载表单
		    			//刷新左边的树
		    			window.parent.left.leftDeptTree.reload();
		    		}
		    		layer.msg(obj.msg);
					layer.close(mainIndex);
		    	})
		    	return false;//阻止同步提交
		    });
		    
		    //渲染添加和修改页面的下拉树
		    var addOrUpdateDeptTree = dtree.renderSelect({
		    	elem:"#menuTree",
		    	url:"/menu/loadAllMenuTreeJson",
		    	dataStyle: "layuiStyle",  //使用layui风格的数据格式
		    	dataFormat: "list",  //配置data的风格为list
		    	selectTips: "请选父级部门",
		    	selectInputName: {
	    		    nodeId: "pid"//,  //提交到后台的部门ID的key
	    			// context: "pname"//提交到后台的部门名称
	    	  	},
	    	  	response:{message:"msg",statusCode:0} //修改response中返回数据的定义
		    });
		    
	  });
	
	//给左边的树节点点击事件调用 
	//window.reloadTable=function()
	function reloadTable(id){
		var params = $("#searchForm").serialize()+"&id="+id;
		tableIns.reload({
    		url:'/menu/loadAllMenu?'+params,
    		page:{
    			curr:1
    		}
    	})
	}
	
	</script>
	
	
	
	
</body>
</html>